<template>
  <div>
    <div>
            <van-nav-bar
            :title="name"
            left-text="返回"
            left-arrow
            @click-left="$router.go(-1)"
            />   
    </div>


    <el-row :gutter="10" style="margin-left: -13px; margin-right: -5px;">
          <el-col :span="10" :offset="1" v-for="goods in goodsList" :key="goods.id">
              <template>
                          <div style="width: 165px; ">
                              
                              <el-skeleton style="width: 165px" :loading="loading" animated>
                              <template slot="template">
                                  <el-skeleton-item
                                  variant="image"
                                  style="width: 165px; height: 165px;"
                                  />
                                  <div style="padding: 14px;">
                                  <el-skeleton-item variant="h3" style="width: 50%;" />
                                  <div
                                      style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
                                  >
                                      <el-skeleton-item variant="text" style="margin-right: 16px;" />
                                      <el-skeleton-item variant="text" style="width: 30%;" />
                                  </div>
                                  </div>
                              </template>
                              <template>
                                  <el-card
                                  :body-style="{ padding: '0px', marginBottom: '1px' }"
                                  
                                  >
                                  <img
                                    :src="goods.imgUrl" 
                                    style="height: 150px;"
                                    @click="$router.push({name:'goodsInformation',query:{id:goods.id}})" 
                                  />
                                  <div style="padding: 14px;">
                                      <span>{{goods.name}}</span>
                                      <div class="bottom card-header">
                                      <span>￥：{{ goods.price }}</span>
                                      <br>
                                      <span>{{ goods.description }}</span>
                                      <br>
                                      <el-button type="text" class="button">商品详情</el-button>
                                      </div>
                                  </div>
                                  </el-card>
                              </template>
                              </el-skeleton>
                          </div>
                      </template>
          </el-col>
      </el-row>

    
  </div>
</template>

<script>
import 'vant/lib/index.css'
import { NavBar } from 'vant';
export default {
    components:{
        [NavBar.name]:NavBar,
    },

    data(){
        return{
            goodsList:[],
            name:'',
            tagId:'',
            loading:false,
        }
    },
    methods:{

        queryTagGoods(){

            if(this.tagId == 1){
                this.name = '新品尝鲜';
            } else if(this.tagId == 2){
                this.name = '限时抢购'; 
            }
            
            this.$axios.get('/api/app/goodsReception/queryGoodsByTagId?tagId='+this.tagId)
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code == 200){
                        this.goodsList = res.data.data
                    }
                })

        },

    },
    created(){
        this.tagId = this.$route.query.tagId;
        console.log(this.tagId);
        this.queryTagGoods();

    }
}
</script>

<style>

</style>